<template>
  <!-- <div style="display: inline-block; vertical-align: text-bottom">
    <el-select v-model="themeColor" @change="changeTheme">
      <el-option
        v-for="item in themeOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div> -->
  <div class="system-sets loc-center" style="margin-right: 5px">
    <el-popover
      popper-class="common-popover setting-popover"
      placement="bottom"
      title="设置"
      trigger="hover"
    >
      <svg-icon
        slot="reference"
        icon-class="system-setting"
        width="24"
        height="24"
        style="cursor: pointer"
        @click="dialogVisible = true"
      />
    </el-popover>
    <!-- 系统设置弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50vw"
      custom-class="jtyj-dialog"
      :before-close="handleClose"
    >
      <SystemSetting></SystemSetting>
    </el-dialog>
  </div>
</template>
  
  <script>
import SystemSetting from "@/views/system-setting/index.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      dialogVisible: false,
      themeColor: localStorage.getItem("themeColor") || "#409EFF",
      themeOptions: [
        { value: "#409EFF", label: "蓝色" },
        { value: "#67C23A", label: "绿色" },
        { value: "#E6A23C", label: "橙色" },
        { value: "#F56C6C", label: "红色" },
      ],
    };
  },
  computed: {
    ...mapState({}),
  },
  components: {
    SystemSetting,
  },
  mounted() {
    document.documentElement.style.setProperty(
      "--color-primary",
      this.themeColor
    );
  },
  methods: {
    changeTheme(color) {
      this.themeColor = color;
      // localStorage.setItem("themeColor", color);
      document.documentElement.style.setProperty("--color-primary", color);
      this.$message.success("主题切换成功");
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.system-sets span {
  height: 40px;
}
.setting-popover.el-popover {
  min-width: 60px !important;
}
</style>